<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import planApi from "@/api/planApi";
import planApplyProjectApi from "@/api/planApplyProjectApi";
import arbitrateApi from "@/api/arbitrateApi";
import constants from "@/utils/constants";

const router = useRouter();
const historyParams = history.state.params;

const submitForm = ref();
const searchForm = ref();
const searchModel = ref({
  planId: historyParams.planId,
  createUserId: "",
});
const visible = ref(false);
let uploadVisible = ref(false);
const loading = ref(false);
const showWatchVideoDialog = ref(false);

let submitData = ref({
  planId: historyParams.planId,
});
const schoolList = ref([]);
const singleRecordData = ref({});

const singleResultDatas = ref([]);

let pagination = reactive({
  total: 0,
  current: 1,
  pageSize: 15,
  showPageSize: true,
  pageSizeOptions: [15, 25, 30, 50],
  showTotal: true,
  pageChange: (current) => {
    pagination.current = current;
    search(current, pagination.pageSize);
  },
  pageSizeChange(size) {
    pagination.pageSize = size;
    search(pagination.current, size);
  },
});

let singleColumns = ref([
  {
    dataIndex: 'prjName',
    title: '项目'
  },
  {
    slotName: 'result',
    title: '原成绩'
  },
  {
    slotName: 'score',
    title: '原得分'
  },
  {
    slotName: 'testStartTime',
    title: '考试时间'
  },
  {
    slotName: 'videoUrl',
    title: '视频'
  },
  {
    title: "操作",
    slotName: "action",
    width: 140,
    fixed: "right"
  }
]);
const data = ref([]);

const apply = (record) => {
  visible.value = true;
  submitForm.value.resetFields();
  submitData.value = Object.assign({}, singleRecordData);
  submitData.value.planId = historyParams.planId;
  submitData.value.studyCode = singleRecordData.studyCode;
  submitData.value.schoolId = singleRecordData.schoolId;
  submitData.value.projectName = record.prjName;
  submitData.value.oldResult = record.result;
  submitData.value.applyId = singleRecordData.value.id;
  submitData.value.state = "待审核";
};

const editRecord = (record) => {
  visible.value = true;
  nextTick(() => {
    submitForm.value.resetFields();
    submitData.value = Object.assign({}, record);
  });
};

const deleteRecord = (record) => {
  userApi
    .delete({
      id: record.id,
    })
    .then((res) => {
      search(1, 15);
    });
};

const handleSubmitSuccess = (values, e) => {
  arbitrateApi.save(submitData.value).then((res) => {
    visible.value = false;
    Message.success("提交申请成功");
  });
};

const search = (current = 1, size = 15) => {
  var params = {
    pageNo: current,
    pageSize: size,
    queryParam: Object.assign({}, searchModel.value),
  };
  loading.value = true;
  arbitrateApi.queryPage(params).then((res) => {
    data.value = res.records;
    pagination.total = res.total;
    loading.value = false;
  });
};

const refresh = () => {
  search(1, 15);
};

let LOGIN_INFO = ref({
  userName: '123',
  password: '123456',
  url: '',
});

const plan = ref({});

const queryPlanDetailById = () => {
  planApi.detailById({
    planId: historyParams.planId
  }).then(res => {
    plan.value = res;
    if (plan.value.cameraIp) {
      LOGIN_INFO.value.url = plan.value.cameraIp;
    } else {
      Message.warning('该计划未配置视频监控IP地址');
    }
  })
}

const viewVideo = (record) => {
  console.log(record);
  showWatchVideoDialog.value = true;
  nextTick(() => {

    let session = new MtConnector();
    console.log(session);
    session.onDisconnectNotification = data => {
      console.log(data);
      Notification.info({
        title: '视频设备通知',
        content: '收到连接断开通知',
      });
    };

    const login = session.connect(LOGIN_INFO.value);
    login.then(res => {
      console.log(res);
      if (res.code === 'success') {
        console.log(record.videoUrl);
        const result = startRecWebRtcVideo(record.videoUrl, "watchVideo", record.testStartTime, record.testEndTime);
      } else {
        Message.warning('视频服务登录失败，请检查服务器是否开启');
      }
    });
  })
}

const queryTestResult = () => {
  var params = {
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
    queryParam: Object.assign({}, searchModel.value),
  };
  planApplyProjectApi.queryTestProjectResult(params).then(res => {
    if (res.records.length > 0) {
      singleRecordData.value = res.records[0];
      singleResultDatas.value = res.records[0].testResultList;
    }
    searchModel.value.studyCode = "";
  })
}

const reset = () => {
  searchForm.value.resetFields();
};

const getSchoolList = () => {
  planApi
    .getSchoolList({
      planId: historyParams.planId,
    })
    .then((res) => {
      schoolList.value = res;
    });
};

getSchoolList();
queryPlanDetailById();
</script>

<template>
<div class="main-con">
  <a-card>
    <a-row>
      <a-col :flex="1">
        <a-form ref="searchForm" :model="searchModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
          label-align="left">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item field="studyCode" label="学籍号">
                <a-input v-model="searchModel.studyCode" @press-enter="queryTestResult" placeholder="请输入学籍号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="idNumber" label="身份证号">
                <a-input v-model="searchModel.idNumber" @press-enter="queryTestResult" placeholder="请输入身份证号" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item field="cardNo" label="IC卡号">
                <a-input v-model="searchModel.cardNo" @press-enter="queryTestResult" placeholder="请输入IC卡号" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
      <a-divider style="height: 84px" direction="vertical" />
      <a-col :flex="'86px'" style="text-align: right">
        <a-space direction="vertical" :size="18">
          <a-button type="primary" @click="queryTestResult">
            <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>
          <a-button @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-space>
      </a-col>
    </a-row>
  </a-card>
  <a-card style="margin-top: 10px;">
    <a-card title="学生信息" style="margin-top: 16px;">
      <div class="flex" style="padding: 10px 0;">
        <a-space size="large">
          <a-avatar :size="80">
            <img v-if="singleRecordData.avatarUrl" alt="avatar" :src="singleRecordData.avatarUrl" />
            <img v-else src="@/assets/girl-pic@2x-d25a2ddb.png" />
          </a-avatar>
        </a-space>
        <div style="margin-left: 80px;">
          <a-descriptions :column="{ xs: 2, md: 2, lg: 2 }">
            <a-descriptions-item label="学生姓名：">
              <div class="show-info">{{ singleRecordData.name }}</div>
            </a-descriptions-item>
            <a-descriptions-item label="分组号：">
              <span v-if="singleRecordData.groupNo">{{
                singleRecordData.groupNo }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="学生性别：">
              <icon-man v-if="singleRecordData.sex == '1'" /><icon-woman v-if="singleRecordData.sex == '2'" /><span
                v-if="singleRecordData.sex">{{
                  singleRecordData.sex == '1' ? '男' : '女' }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="组内编号：">
              <span v-if="singleRecordData.groupInNo">{{ singleRecordData.groupInNo }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="学校名称：">
              <span v-if="singleRecordData.schoolName">{{ singleRecordData.schoolName
                }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="学籍号：">
              <span v-if="singleRecordData.studyCode">{{ singleRecordData.studyCode }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="年级班级：">
              <span v-if="singleRecordData.gradeName">{{ singleRecordData.gradeName + " / " +
                singleRecordData.classesName }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="身份证号：">
              <span v-if="singleRecordData.idNumber">{{ singleRecordData.idNumber }}</span>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-card>
    <a-card :title="'考试项目'" style="margin-top: 20px;">
      <a-table :bordered="{ cell: true }" :columns="singleColumns" :data="singleResultDatas" :pagination="false">
        <template #score="{ record }">
          <a-tag :color="!record.score ? 'orange' : 'blue'">{{ !record.score ? '—' :
            record.score }}</a-tag>
        </template>
        <template #result="{ record }">
          <a-tag :color="!record.score ? 'orange' : 'blue'">{{ !record.result ? '—' :
            record.result }}</a-tag>
        </template>
        <template #testStartTime="{ record }">
          {{ !record.testStartTime ? '—' : record.testStartTime }}
        </template>
        <template #videoUrl="{ record }">
          <icon-play-circle-fill v-if="record.videoUrl" style="color: #00AAFF;cursor: pointer;" size="large"
            @click="viewVideo(record)" />
          <span v-else>—</span>
        </template>
        <template #action="{ record }">
          <a-space>
            <a-popconfirm content="确认要申请仲裁吗？" @ok="apply(record)">
              <a-button v-if="record.result && record.result != '—'" size="small" type="text">申请仲裁</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
  </a-card>
</div>
  <a-modal v-model:visible="visible" title="申请仲裁" :footer="null">
    <a-form ref="submitForm" size="large" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
      :model="submitData" @submit-success="handleSubmitSuccess">
      <a-form-item field="projectName" label="项目名称">
        <a-input v-model="submitData.projectName" readonly></a-input>
      </a-form-item>
      <a-form-item field="oldResult" label="成绩">
        <a-input v-model="submitData.oldResult" readonly></a-input>
      </a-form-item>
      <a-form-item field="reason" label="申请原因">
        <a-textarea v-model="submitData.reason" placeholder="请输入申请原因"></a-textarea>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button html-type="submit" type="primary">保存</a-button>
          <a-button @click="() => {
            visible = false;
          }
            ">取消</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="showWatchVideoDialog" title="查看录像视频" :fullscreen="true" :footer="null">
    <div id="watchVideo" class="watchVideo"></div>
  </a-modal>
</template>

<style>
.show-info {
  display: inline-block;
  width: 150px;
}

.watchVideo {
  /* width: 800px; */
  height: 550px;
}

.watchVideo video {
  width: 100%;
  height: 100%;
  text-align: center;
}
</style>
